<template>
  <div class="flex-warp">
    <div v-for="(item, index) in list" :key="index" class="img-size rel">
      <!-- <img class="pointer" :src="item" @click="onFileOpen(item)"/> -->
      <video :src="item" controls />
      <div
        class="img-del pointer"
        v-if="!disabled"
        @click="handleFileDel(index)"
      >
        <img src="@/assets/img/shangpin_del.png" />
      </div>
    </div>
    <!--     v-loading="loading" -->
    <el-upload
      multiple
      :show-file-list="false"
      :auto-upload="false"
      :on-change="handleChange"
      :accept="getAcceptValue"
      :disabled="disabled || loading"
    >
      <template #trigger v-if="!disabled">
        <div class="img-size_add">
          <img
            v-if="progress === 0 && loading === false"
            src="@/assets/img/shangpin_video.png"
          />
          <div class="progress" v-else v-loading="loading">
            <span>{{ progress }}</span>
            <!-- <el-progress :percentage="progress" /> -->
          </div>
        </div>
      </template>
    </el-upload>
  </div>
</template> 
<script setup>
import { ref, computed, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { ElMessage } from "element-plus";
import { deepClone, onFileOpen } from "@/utils/index.js";
import { useTrigger } from "@/hooks/useValidatorRules.js";
const { emitTrigger } = useTrigger();
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: [Array, String],
    default: null,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  accept: {
    type: Array,
    default: [],
  },
  limit: {
    type: [String, Number],
    default: 9999,
  },
  type: {
    type: String,
    default: "Array",
  },
  size: {
    type: String,
    default: "",
  },
});
const loading = ref(false);
const progress = ref(0);
const getAcceptValue = computed({
  get: () => {
    return props.accept.join(",");
  },
});
const list = computed({
  get: () => {
    if (!props.modelValue) {
      return [];
    } else if (props.type === "Array") {
      return props.modelValue || [];
    } else if (props.type === "String") {
      return props.modelValue.split(",");
    }
  },
  set: (data) => {
    if (props.type === "Array") {
      emits("update:modelValue", data);
    } else if (props.type === "String") {
      emits("update:modelValue", data.join(","));
    }
    emitTrigger();
  },
});
const handleFileDel = (index) => {
  const d = deepClone(list.value);
  d.splice(index, 1);
  list.value = d;
};
const handleChange = (file) => {
  const d = deepClone(list.value);
  if (d && d.length + 1 > props.limit * 1) {
    ElMessage.warning(`超出上传最大限制${props.limit}`);
    return;
  }
  if (props.size && file.size / 1024 / 1024 > props.size * 1) {
    ElMessage.warning(`视频大小不得超出${props.size}M`);
    return;
  }
  progress.value = 0;
  loading.value = true;
  const formData = new FormData();
  formData.append("uploadFile", file.raw);
  proxy
    .$post({
      url: "/upload",
      data: formData,
      onUploadProgress: (progressEvent) => {
        if (progressEvent.lengthComputable) {
          const uploadProgress = Math.round(
            (progressEvent.loaded / progressEvent.total) * 100
          );
          progress.value = uploadProgress;
        }
      },
    })
    .then(
      (res) => {
        d.push(res.url);
        list.value = d;
        loading.value = false;
        progress.value = 0;
      },
      () => {
        loading.value = false;
        progress.value = 0;
      }
    );
};
</script>
<style lang="less" scoped>
.img-size_add {
  width: 130px;
  height: 110px;
  margin-right: 10px;
  border: 1px dashed rgba(0, 0, 0, 0.17);
  .progress {
    background-color: var(--el-mask-color);
    width: 130px;
    height: 110px;

    display: flex;
    justify-content: center;
    align-items: center;

    span {
      z-index: 9999;
    }
  }
}
.img-size {
  width: 130px;
  height: 110px;
  margin-right: 10px;
  border: 1px dashed rgba(0, 0, 0, 0.17);

  & > video {
    width: 100%;
    height: 100%;
  }
  .img-del {
    position: absolute;
    top: -9px;
    right: -10px;
    width: 20px;
    height: 20px;
    line-height: 0px !important;
    z-index: 9;
    & > img {
      width: 100%;
      height: 100%;
      border-radius: 30%;
    }
  }
}
</style>

